<template>
  <div>
    <!-- 过滤器的使用，需要使用管道符|连接 -->
    <p>价格:{{ price | money }}</p>
    <p>价格:{{ 200 | money }}</p>
    <!-- 过滤器是可以传参使用的 -->
    <p>价格:{{ 300 | toFixed(3) }}</p>
    <!-- 过滤器是可以链式调用的 -->
    <p>价格:{{ 300 | toFixed(3) | money }}</p>

    <!-- 使用全局过滤器 -->
    <p>爱好1:{{ "打球" | isNull }}</p>
    <p>爱好2:{{ null | isNull }}</p>
    <p>爱好3:{{ undefined | isNull }}</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      price: 100,
    };
  },
  //局部注册过滤器,只能在当前组件内使用
  filters: {
    /* 过滤器接收的第一个参数就是需要被过滤的值,过滤出来的值需要return返回出去,供模板使用 */
    money(value) {
      console.log(value);
      return "￥" + value;
    },
    /* 
      过滤器除了接收的第一个参数外，其他参数都是过滤使用时传递的参数
    */
    toFixed(value, count) {
      console.log(value, count);
      return value.toFixed(count);
    },
  },
};
</script>

<style></style>
